<%--
  Created by IntelliJ IDEA.
  User: Oracle
  Date: 2022/5/5
  Time: 10:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
    <title>我的出售</title>
</head>

<link rel="stylesheet" href="/static/css/font/iconfont.css">
<link rel="stylesheet" href="/static/css/font/iconfont.css"/>
<link rel="stylesheet" href="/static/css/userpage.css">
<link rel="stylesheet" href="/static/css/floatbar.css">
<link rel="stylesheet" href="/static/css/font.css"/>
<link rel="stylesheet" href="/static/css/font-awesome.css"/>
<script src="/static/js/store.js"></script>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-image: url(/static/image/header-bg_csgo.jpg);
        background-repeat: no-repeat;
    }

    .bigBox {
        width: 100%;
        height: auto;
    }

    .middle {
        width: 100vw;
        height: 18.5vh;
        background-image: url(/static/image/marcket-header-bg.png);
        background-repeat: no-repeat;
        margin: 2vh 10vw;
    }

    .middle_li {
        width: 80vw;
        height: 10vh;
    }

    .middle_top {
        width: 60vw;
        height: 6vh;
        float: left;
    }

    .middle_top li {
        color: #858b91;
        list-style: none;
        width: 5vw;
        margin-top: 5.7vh;
        font-weight: 800;
        margin-left: 2.6vw;
    }

    .middle_top li:hover {
        color: #ffffff;
    }

    .middle_top_right {
        width: 18vw;
        height: 6vh;
        float: left;
        margin-top: 4vh;
        display: flex;
        justify-content: flex-end;
    }

    .middle_top_right span {
        width: 7vw;
        color: #4674cc;
        font-size: 13px;
        font-weight: 200;
        line-height: 7vh;
    }

    .hr {
        width: 73%;
        height: 0;
        margin-left: 2.6vw;
    }

    .middle_under {
        width: 75vw;
        height: 32px;
        margin-top: 2.5vh;
        margin-left: 25px;
    }

    .middle_under_li {
        width: 40vw;
        height: 30px;
        display: flex;
        float: left;
        font-weight: 400;
    }

    .middle_under_li li {
        color: #858b91;
        list-style: none;
        width: 6vw;
        height: 28px;
        margin-top: 0vh;
        border-radius: 3px;
        background-color: #2d2f3e;
        line-height: 30px;
        padding-left: 4px;
        margin-left: 1vw;
        font-size: 12px;
    }

    .middle_under_li li:hover {
        background-color: #45536c;
    }

    .middle_under_input {
        width: 20vw;
        height: 32px;
        float: left;
        display: flex;
        justify-content: end;
        padding-left: 14vw;
    }

    .middle_under_input input {
        height: 30px;
        background-color: #1d2a43;
        border: none;
    }

    .middle_under_input button {
        height: 30px;
        width: 90px;
        background-color: #3f5d97;
        border: none;
        font-size: 14px;

    }

    .under {
        width: 78vw;
        height: 7.5vh;
        margin-top: 6vh;
        background-color: #1c202b;
    }

    .under_li li {
        list-style: none;
        color: #7d7f81;
        float: left;
        width: 10vw;
        height: 52px;
        text-align: center;
        line-height: 7vh;
        border-right: #283041 1px solid;
    }

    .under_li li:hover {
        font-weight: 800;
        color: #f5f5f6;
        background-color: #383d48;
    }

    .button {
        width: 30vw;
        height: 52px;
        float: left;
        margin-left: 25.5vw;
    }

    .button li {
        list-style: none;
        width: 8vw;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 15px;
        background-color: #4773C8;
        color: white;
        margin:7px 0 0 300px;
    }
    .button li:hover{
        background-color: #4f85ee;
        cursor: pointer;
    }

    .button li:hover {
        color: white;
    }


    .best_under {
        width: 78vw;
        height: 100vh;
        background-color: #fafafa;
    }

    ul {
        box-sizing: border-box;
        display: flex;
    }

    a {
        text-decoration: none;
        color: #7d7f81;
    }

    a:hover {
        color: #f5f5f6;
    }

    .icon-wodedianpu {
        font-size: 16px;
    }

    .icon-shezhi {
        font-size: 16px;
    }

    .icon-sousuo {
        font-size: 14px;
    }

    .icon-a-zhengfangxingfuxuankuang {
        color: #e2a52f;
        font-size: 14px;
    }

    .tail {
        margin-top: 100vh;
    }

    .goods {
        width: 210px;
        height: 220px;
        border: 1px solid #d6d6d6;
        float: left;
        margin: 25px 0 0 24px;
    }

    .goods i{
        float: right;
        position: relative;
        opacity: 0;
        color: #d6d6d6;
        bottom: 20px; right: 5px;
    }

    .goods:hover{
        cursor: pointer;
        border: 1px solid orange;
    }

    .goods > .goods-img {
        text-align: center;
        width: 210px;
        height: 170px;
        background-image: url(/static/image/item_bg.png);
        position: relative;
        left: 0;
        top: 0;
    }

    .dealTime{
        width: auto;
        height: auto;
        font-size: 13px;
        color: cornsilk;
        position: absolute;
        left: 7px;
        top: 152px;
    }

    .goods > .goods-img img {
        margin-top: 10px;
    }


    .goods > .goods-info {
        width: 210px;
        height: 50px;
        background-color: #F9F9F9;
    }

    .goods-info h3 {
        width: 210px;
        font-weight: normal;
        font-size: 14px;
        padding: 3px 0;
        overflow: hidden;
    }

    .goods-info span {
        font-weight: bold;
        color: orange;
        font-size: 14px;
        padding-left: 5px;
    }

    .goodsTitle {
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .goodsTitle:hover {
        text-overflow: inherit;
        overflow: visible;
    }
    .goods-info a{
        color: black;
    }
    .goods-info a:hover{
        color: orange;
    }

    .sellGoodsList ul{
        display: block;
    }
    .pagingDiv{
        width: 100%;
        height: 30px;
        float: left;
        text-align: center;
        margin: 50px auto;
        font-size: 18px;
    }
    .pagingDiv a{
        margin: 5px;
    }
</style>

<script src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function (){

        /*待下架物品的id*/
        var soldOUtIds = new Array();

        $(".goods").click(function(){
            var val = $(this).children("input").attr("name");
            var id = $(this).children("input").val();
            if(val == "dealIds"){
                $(this).find("i").css({"opacity":"0","color":"#d6d6d6"});
                $(this).children("input").attr("name","dealId");
                $(this).css({"border":"1px solid #d6d6d6"});
                for(var i = 0;i<soldOUtIds.length;i++){
                    if(soldOUtIds[i] == id){
                        soldOUtIds.splice(i,1);
                    }
                }
            }else{
                $(this).find("i").css({"opacity":"1","color":"orange"});
                $(this).children("input").attr("name","dealIds");
                $(this).css({"border":"1px solid orange"});
                soldOUtIds.push(id);
            }
        });

        /*下架所选物品*/
        $("#soldOutBtn").click(function (){
            console.log(soldOUtIds);

            if(soldOUtIds.length != 0){

                var f = confirm("是否下架选中的" + soldOUtIds.length +"件饰品?")
                if(f){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/deal/batchSoldOutGoods",
                        data:{"dealIds":soldOUtIds},
                        type:"post",
                        traditional:true,
                        success:function (res){
                            alert("下架成功")
                            window.location.href = "${pageContext.request.contextPath}/user/mysell";
                        },
                        error:function (){
                            alert("请求失败");
                        }
                    })
                }
            } else {
                alert("请选择下架物品")
            }



        })




    });


</script>
<body>
<div class="bigBox">
    <div class="top">
        <iframe src="${pageContext.request.contextPath }/goods/head" scrolling="no" width="100%"
                height="71px" frameborder="0" name="sell" id="userTop"></iframe>
    </div>
    <div class="middle">
        <div class="middle_li">
            <div class="middle_top">
                <ul>
                    <li><a href="我的出售.html">自售管理</a></li>
                    <li><a href="正在寄售.html">正在寄售</a></li>
                    <li><a href="出售记录.html">出售记录</a></li>
                    <li><a href="javascript:;">出售统计</a></li>
                    <li><a href="还价管理.html">还价管理</a></li>
                </ul>
            </div>
            <div class="middle_top_right">
                <span><i class="iconfont icon-wodedianpu"></i>&nbsp;我的店铺</span>
                <span><i class="iconfont icon-shezhi"></i>&nbsp;店铺设置</span>
            </div>
        </div>
        <div class="hr">
            <hr color="#4773c8">
        </div>
        <div class="middle_under">
            <div class="middle_under_li">
                <li>筛选</li>
                <li>品质</li>
                <li>类别</li>
                <li>外观</li>
            </div>
            <div class="middle_under_input">
                <input type="text" size="30" placeholder="请输入物品名称"/>
                <button type="button"><i class="iconfont icon-sousuo"></i>搜索</button>
            </div>
        </div>
        <div class="under">
            <div class="under_li">
                <li><a href="我的出售.html">自售中</a></li>
                <li><a href="等待收货.html">等待发货</a></li>
            </div>
            <div class="button">
                <li id="soldOutBtn">
                   <span>下架</span>
                </li>
            </div>
        </div>
        <div class="best_under">
            <div class="sellGoodsList">

                <div class="sellGoods">
                    <c:if test="${empty requestScope.sellList}">
                        <center>
                            <img src="/static/image/data-nodata.png" width="313px" height="107px" style="margin-top: 100px;">
                            <br><br/>
                            <font color="gray">暂时什么都还没有呢</font>
                        </center>
                    </c:if>

                    <c:if test="${not empty requestScope.sellList}">
                        <%--用户已出售物品迭代--%>
                        <ul class=“sellGoodsUl”>
                        <c:forEach items="${requestScope.sellList}" var="deal">
                            <li value="${deal.id}">
                                <div class="goods" >
                                    <input type="hidden" name="dealId" value="${deal.id}"/>
                                    <div class="goods-img">
                                        <div class="dealTime" >
                                            <fmt:formatDate value="${deal.dealTime}" pattern="MM/dd HH:mm:ss" var="d" />
                                            <span>出售时间:${d}</span>
                                        </div>
                                        <img src="${deal.ep.goods.converPath}" width="147px" height="147px" />
                                    </div>
                                    <div class="goods-info">
                                        <a href="/goods/goodsInfo/${deal.ep.id}">
                                        <h3 class="goodsTitle">&nbsp;
                                                ${deal.ep.goods.goodsType.typeName} | ${deal.ep.goods.coating} (${deal.ep.appearance})
                                        </h3>
                                        </a>

                                        <span>￥${deal.price}</span>
                                    </div>
                                    <i class="fa fa-check"></i>
                                </div>
                            </li>
                        </c:forEach>
                        </ul>
                        <div class="pagingDiv">
                            <a href="">首页</a>
                            <a href="">上一页</a>
                            <a href="javascirpt:;">${requestScope.pageInfo.pageNum}/${requestScope.pageInfo.pages}</a>
                            <a href="">下一页</a>
                            <a href="">尾页</a>
                        </div>
                    </c:if>
                </div>

            </div>

        </div>

    </div>

</div>
<div class="tail">
    <iframe src="${pageContext.request.contextPath }/goods/tail" scrolling="no" width="100%" height="324px"
            frameborder="0"></iframe>
</div>
<%--右侧悬浮框--%>
<div class="floatbar">
    <a href="">
        <div class="Icontext"><span class="iconfont icon-shouji"></span><br/>
            <font size="1">App</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-xingxing"></span><br/>
            <font size="1" color="#95959">收藏</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-weixin"></span><br/>
            <font size="1" color="#95959">公众号</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-weibo"></span><br/>
            <font size="1" color="#95959">微博</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-wenhao"></span><br/>
            <font size="1" color="#95959">帮助</font>
        </div>
    </a>
    <a href="">
        <div class="Icontext"><span class="iconfont icon-duanxin"></span><br/>
            <font size="1" color="#95959">客服</font>
        </div>
    </a>
    <a href="javascript:scroll(0,0);">
        <div class="backTop"><span class="iconfont icon-sanjiaoxing_shang"></span><br/>
            <font size="2" color="#95959">TOP</font>
        </div>
    </a>
</div>
<%-- 用户信息悬浮框 --%>
<div class="store" id="store">
    <div class="store-info">
        <div class="store-user">
            <div class="store-user-img">
                <c:if test="${empty sessionScope.userNow.headPath}">
                    <img src="../static/image/defaultHead.png" width="52px" height="52px"/>
                </c:if>
                <c:if test="${not empty sessionScope.userNow.headPath}">
                    <img src="${sessionScope.userNow.headPath}" width="52px" height="52px"/>
                </c:if>
            </div>
            <div class="store-user-name">
                <c:if test="${not empty sessionScope.userNow.username}">
                    <h4>${sessionScope.userNow.username}</h4>
                </c:if>
                <c:if test="${empty sessionScope.userNow.username}">
                    <h4>${sessionScope.userNow.tellphone}</h4>
                </c:if>
                <p><a href="/user/logout">注销</a></p>
            </div>
        </div>
        <div class="store-account">
            <div class="balance">余额
                <span>￥${sessionScope.userNow.balance}</span>
            </div>
            <div class="topUp">
                <a href="${pageContext.request.contextPath }/user/center">充值</a>
            </div>
        </div>
    </div>
</div>

</div>


</body>
</html>
